<!-- <jumbotrons tag-name="'Article'" tag-type="'0'"></jumbotrons> -->
<section class="card manual">
    <div class="card-header">
        <filter-list request="request" callback="getList(pageIndex)"></filter-list>
        <select class="btn custom-select custom-select-sm col-3" ng-model="selectedList.action">
            <option ng-repeat="item in actions" ng-value="item">{{item}}</option>
        </select>
        <a class="btn btn-primary text-white" ng-if="selectedList.data.length > 0 && selectedList.action" ng-click="applyList()">Apply</a>            
    </div>
    <div class="card-body">
        <table class="table table-sm table-hover" cellspacing="0">
            <thead class="thead-light">
                <tr>
                    <th scope="col" style="width: 3%;">
                        <span class="fas fa-sort"></span>
                    </th>
                    <th scope="col" style="width: 4%;">
                        <input type="checkbox" ng-model="selectedList.isSelectAll" ng-change="selectAll(selectedList.isSelectAll)">
                    </th>
                    <th scope="col" style="width: 25%;">
                        Title
                    </th>
                    <th scope="col" width="10%">
                        Image
                    </th>
                    <th scope="col" width="10%">
                        Created Date
                    </th>
                    <th scope="col" style="width: 10%;">
                        Created By
                    </th>

                    <th scope="col" style="width: 5%;">Actions</th>
                </tr>
            </thead>

            <tbody class="sortable" ng-init="getList()">
                <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="article" sort-model-id="{{item.id}}">
                    <td style="cursor:move;" class="drag-header">
                        <span class="fas fa-sort"></span>
                    </td>
                    <td>
                        <input type="checkbox" ng-model="item.isSelected" ng-change="select(item.id, item.isSelected)">
                    </td>
                    <td>
                        {{item.title}}
                    </td>
                    <td>
                        <preview-image img-height="25" img-src="item.imageUrl"></preview-image>
                    </td>
                    <td>
                        <small>
                            {{item.createdDateTime | utcToLocal}}
                        </small>
                    </td>
                    <td>
                        {{item.createdBy}}
                    </td>

                    <td>
                        <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                            <a href="/portal/article/details/{{item.id}}" class="btn btn-light">
                                <span class="fas fa-pencil-alt text-primary"></span>
                            </a>
                            <a ng-click="preview(item)" target="_blank" class="btn btn-light">
                                <span class="fas fa-eye text-info"></span>
                            </a>
                            <a ng-click="remove(item.id);" class="btn btn-light">
                                <span class="fas fa-times text-danger"></span>
                            </a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end" a-class="page-link" paging-action="getList(page-1)" scroll-top="true">
        </paging>
    </div>
</section>
